<div class="padLg flexVCent">
  <div class="backToSummaryWrap">
    <a class="js-backToSummary clrTEm txU"><%= ob.polyT(`orderDetail.backToSummary`) %></a>
  </div>
  <div class="txCtr txB tx3 flexExpand"><%= ob.polyT(`orderDetail.resolveDisputeTab.heading`) %></div>
</div>
<hr class="clrBr rowMd" />
<form class="padKids padStack pad clrP clrBr js-fulfillForm">
  <div class="flexRow gutterH">
    <div class="col3">
      <label for="resolveDisputeBuyerAmount" class="required rowTn"><%= ob.polyT(`orderDetail.resolveDisputeTab.buyerAmountLabel`) %></label>
      <div class="clrT2 tx6 js-buyerName"><%= ob.buyerName %></div>
    </div>
    <div class="col9">
      <% if (ob.errors['buyerPercentage']) print(ob.formErrorTmpl({ errors: ob.errors['buyerPercentage'] })) %>
      <div class="flex gutterH">
        <div class="inputBuyerAmountWrap flexNoShrink">
          <input type="text" class="clrBr clrSh2" name="buyerPercentage" id="resolveDisputeBuyerAmount" value="<%= ob.buyerPercentage %>" placeholder="" data-var-type="number" />
          <div class="js-buyerAvatar avatar disc clrBr2 clrSh1" style="<%= ob.getAvatarBgImage(ob.buyerAvatarHashes) %>"></div>
        </div>
        <p class="buyerContractUnarrivedMsg"><i class="ion-alert-circled margRSm clrTAlert"></i><%= ob.polyT(`orderDetail.resolveDisputeTab.buyerContractUnavailable`) %> <span class="toolTip clrT" data-tip="<%= ob.polyT(`orderDetail.resolveDisputeTab.buyerContractUnavailableTip`) %>"><i class="ion-help-circled"></i></span></p>
      </div>
    </div>
  </div>
  <div class="flexRow gutterH">
    <div class="col3">
      <label for="resolveDisputeVendorAmount" class="required rowTn"><%= ob.polyT(`orderDetail.resolveDisputeTab.vendorAmountLabel`) %></label>
      <div class="clrT2 tx6 js-vendorName"><%= ob.vendorName %></div>
    </div>
    <div class="col9">
      <% if (ob.errors['vendorPercentage']) print(ob.formErrorTmpl({ errors: ob.errors['vendorPercentage'] })) %>
      <div class="flex gutterH">
        <div class="inputVendorAmountWrap js-inputVendorWrap flexNoShrink">
          <input type="text" class="clrBr clrSh2" name="vendorPercentage" id="resolveDisputeVendorAmount" value="<%= ob.vendorPercentage %>" placeholder="" data-var-type="number" />
          <div class="js-vendorAvatar avatar disc clrBr2 clrSh1" style="<%= ob.getAvatarBgImage(ob.vendorAvatarHashes) %>"></div>
        </div>
        <p class="vendorContractUnarrivedMsg"><i class="ion-alert-circled margRSm clrTAlert"></i><%= ob.polyT(`orderDetail.resolveDisputeTab.vendorContractUnavailable`) %> <span class="toolTip clrT" data-tip="<%= ob.polyT(`orderDetail.resolveDisputeTab.vendorContractUnavailableTip`) %>"><i class="ion-help-circled"></i></span></p>
        <p class="vendorProcErrContractUnarrivedMsg"><i class="ion-alert-circled margRSm clrTAlert"></i><%= ob.polyT(`orderDetail.resolveDisputeTab.vendorContractUnavailableProcErr`) %></p>
      </div>
    </div>
  </div>
  <div class="flexRow gutterH">
    <div class="col3">
      <label for="resolveDisputeComment" class="required"><%= ob.polyT(`orderDetail.resolveDisputeTab.commentLabel`) %></label>
    </div>
    <div class="col7">
      <% if (ob.errors['resolution']) print(ob.formErrorTmpl({ errors: ob.errors['resolution'] })) %>
      <textarea rows="6" name="resolution" class="clrBr clrP clrSh2" id="resolveDisputeComment" placeholder="<%= ob.polyT(`orderDetail.resolveDisputeTab.commentPlaceholder`) %>"><%= ob.resolution %></textarea>
    </div>
  </div>
</form>
<hr class="clrBr" />
<div class="buttonBar flexHRight flexVCent gutterHLg">
  <a class="js-cancel <% if (ob.resolvingDispute) print('disabled') %>"><%= ob.polyT(`orderDetail.resolveDisputeTab.btnCancel`) %></a>
  <div class="posR">
    <%= ob.processingButton({
      className: `btn clrBAttGrad clrBrDec1 clrTOnEmph js-submit ${ob.resolvingDispute ? 'processing' : ''}`,
      btnText: ob.polyT(`orderDetail.resolveDisputeTab.btnSubmit`),
    }) %>
    <div class="js-resolveConfirm confirmBox resolveConfirm tx5 arrowBoxBottom clrBr clrP clrT <% if (!ob.resolveConfirmOn) print('hide') %>">
      <div class="tx3 txB rowSm"><%= ob.polyT('orderDetail.resolveDisputeTab.resolveConfirm.title') %></div>
      <p><%= ob.polyT('orderDetail.resolveDisputeTab.resolveConfirm.body') %></p>
      <hr class="clrBr row" />
      <div class="flexHRight flexVCent gutterHLg buttonBar">
        <a class="js-resolveConfirmCancel"><%= ob.polyT('orderDetail.resolveDisputeTab.resolveConfirm.btnCancel') %></a>
        <a class="btn clrBAttGrad clrBrDec1 clrTOnEmph js-resolveConfirmed"><%= ob.polyT('orderDetail.resolveDisputeTab.resolveConfirm.btnSubmit') %></a>
      </div>
    </div>
  </div>
</div>